import React, {useEffect, useState} from 'react'
import {connect} from 'react-redux'
import {SET_EVENT_INFO_FIELD, SET_EVENT_INFO_VALUE} from '../../../redux/constants/eventDetail/tabInfo'
import {Button, Modal, ModalBody, ModalFooter, ModalHeader} from "reactstrap"
import {setFieldData} from "../../../redux/actions/helper"
import {getTags} from '../../../redux/actions/tags'
import {createTag} from "../../../redux/actions/eventDetail/tabInfo";
import FullSpinnerDimming from "../../@vuexy/spinner/Full-spinner-dimming";

const TagModal = props => {
  const {params, setFieldData, createTag, spinner} = props
  const [name, setName] = useState('');
  const [nameValid, setNameValid] = useState(false)
  const [color, setColor] = useState(0)

  const colors = [
    '#C4C4C4',
    '#EA5455',
    '#7E72F2',
    '#28C76F',
    '#CDAA2F',
    '#00ACEA',
    '#1D3CD1',
    '#C544BF',
  ]
  const toggleModal = () => {
    setFieldData(SET_EVENT_INFO_VALUE, 'params', {...params, isTagsModal: false})
  }

  const clickSave = () => {
    if (name) {
      createTag({
        name: name,
        color: colors[color],
        type: 'Event',
      })
    } else {
      setNameValid(true)
    }
  }

  /* useEffect(() => {
     getTags({fields: "tags.id,tags.name", type: "Event"}, SET_ADD_EVENT_TAGS)
   }, [])*/

  return (
    <React.Fragment>
      <Modal
        isOpen={params.isTagsModal}
        toggle={toggleModal}
        size="sm"
        className={'tags-modal-event'}
      >
        {spinner.includes('event-detail-tags') && <FullSpinnerDimming/>}
        <ModalHeader toggle={toggleModal}>Добавить тег</ModalHeader>
        <ModalBody>
          <input
            onChange={e => {
              setName(e.target.value)
              nameValid && setNameValid(false)
            }}
            placeholder={'Название'}
            value={name}
            className={`event-content-list-item event-tags-edit w-100 ${nameValid ? 'custom-input-invalid' : ''}`}
          />
          <div className="invalid-feedback">Введите название</div>

          <div className="colors">
            {
              colors.map((value, id) => {
                return <div key={id} className={`color ${id === color ? 'color-bordered' : ''}`}
                            style={{backgroundColor: value}} onClick={()=>setColor(id)}/>
              })
            }
          </div>
        </ModalBody>
        <ModalFooter>
          <Button.Ripple color="primary" className="btn-uppercase" onClick={clickSave}>
            Добавить
          </Button.Ripple>
        </ModalFooter>
      </Modal>
    </React.Fragment>
  )
}

const mapStateToProps = state => ({
  params: state.eventInfo.params,
  spinner: state.helper.spinner,
})

export default connect(mapStateToProps, {setFieldData, createTag})(TagModal)
